<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选座</title>
    <style media="screen">
        body{
            padding:81px 0;
        }
        .all{
            overflow: hidden;
        }
            .room{
                width: 700px;
                float:left;
        
        
            }
            .screen{
                width: 533px;
                margin:auto;
            }
            .screen p{
                text-align: center;
                margin:auto;
            }
            .seats{
                max-width: 600px;
                overflow-x: auto;
                margin:auto;
            }
        
            .seat_null{
                width: 17px;
                height: 15px;
                display: inline-block;
                margin-right: 7px;
            }
            .seat_optional,.seat_selected,.seat_noselected{
                width: 17px;
                height: 15px;
                display: inline-block;
                background: url(images/new_ticket_ico.png) no-repeat;
                margin-right: 7px;
            }
            i.seat_optional{
                background-position: -171px -112px;
            }
            i.seat_selected{
                background-position: -188px -112px;
            }
            i.seat_noselected{
                background-position: -205px -112px;
            }
            .dynamicSeats{
                margin:auto;
        
            }
            .rowTable{
                position: absolute;
                left:15px;
                top:210px;
                font-size:15px;
            }
            .rowTable td{
                padding-top:2px;
            }
            .dynamicSeats td{
                white-space: nowrap;
            }
            .seats-info{
                margin:50px 0;
                text-align: center;
            }
            .seats-info span{
                margin-right:20px;
            }
            .seats-info i{
                width: 23px;
                height: 19px;
                background: url("images/new_ticket_ico.png") no-repeat;
                display: inline-block;
        
            }
            .seats-info i.optional{
                background-position: -126px -262px;
            }
            .seats-info i.selected{
                background-position: -149px -262px;
            }
            .seats-info i.noselected{
                background-position: -101px -262px;
            }
            .film-info{
                width: 300px;
                float:left;
            }
        </style>
</head>
<body>
  
        <h3>选座</h3>
        <div class="all">
            <div class="room">
                <div class="screen">
                    <img src="images/ticket_screen.jpg" alt="" />
                    <p>
                        
                    </p>
                    <p>
                        （剩余99个座位）
                    </p>
                </div>
                <div class="seats">
                    <table >
        
                    </table>
                </div>
                <div class="seats-info">
                    <span>
                        <i class="optional"></i>
                        可选座位
                    </span>
                    <span>
                        <i class="selected"></i>
                        已选座位
                    </span>
                    <span>
                        <i class="noselected"></i>
                        不可选座位
                    </span>
                </div>
            </div>
            <div class="film-info">
                <h3 class="name-info">电影名称：</h3>
                <p class="screening-info">
                    影院：
                </p>
                <p class="version-info">
                    版本：
                </p>
                <p>
                    场次：
                </p>
                <p class="tickets">
                    座位：
                </p>
                <p>
                    票价：
                </p>
                <p >
                    票数：
                </p>
                <hr>
                <p>
                    总计：
                </p>
                <p>
                    <div class="">
                        请输入兑换手机号：
                    </div>
                    <div class="">
                        <input type="text" name="name" value="">
                    </div>
                    <div class="">
                        <input type="button" name="name" value="下一步">
                    </div>
        
                </p>
            </div>
        </div>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script src="js/buy.js" type="module"></script>
</body>
</html>